<template>
  <div class="login">
     <van-nav-bar title="登录">
      <template #left>
        <router-link to="/">首页</router-link>
      </template>
      <template #right>
        <router-link to="/register">注册</router-link>
      </template>
    </van-nav-bar>

    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true}]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true}]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    onSubmit() {
      this.axios
        .post("/login", `username=${this.username}&password=${this.password}`)
        .then((result) => {
          console.log(result);
          if (result.data.code == 200) {
            let that = this;
            Toast({
              message: "登录成功",
              duration: 3000,
              onClose: function () {
                // 接收数据库返回的信息
                that.$store.commit("login", [result.data.result.username,result.data.result.nickname,result.data.result.article_number,result.data.result.avatar]);
                that.$router.push("/");
              },
            });
          } else if (result.data.code == 201) {
            Toast.fail("登录失败");
          }
        });
    },
  },
};
</script>

<style>
.login .van-nav-bar {
  /* 统一主色调 */
  background-color: #1989FA;
}
.login .van-nav-bar__title,
.login .van-nav-bar__left a,
.login .van-nav-bar__right a {
  color: white;
}
.login .van-button {
  border: 0;
}
</style>
